<template>
  <div class='article-add'>
    <div class="containner">
      <div class="title">
        发布文章
      </div>
      <el-form style="display: flex;" :rules="rules" ref="ruleForm" label-position="left" label-width="80px"
               :model="article">
        <div class="article-left">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item label="文章标题" prop="title">
                <el-input v-model="article.title"></el-input>
              </el-form-item>
              <el-form-item label="文章简介" prop="summary">
                <el-input v-model="article.summary"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="封面图" prop="" class="articeAvatar">
                <el-upload drag class="avatar-uploader" :show-file-list="false" ref="upload" name="filedatas"
                           :action="uploadPictureHost" :http-request="uploadSectionFile"
                           :before-upload="handleUploadBefore" multiple>
                  <img v-if="article.avatar" style="width: 100%;height: 100%;" :src="article.avatar"
                       class="imgAvatar"/>
                  <i v-else class="el-icon-plus avatar-img-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="文章内容" prop="contentMd">
            <el-upload style="color: var(--theme-color)" :show-file-list="false" ref="upload" name="filedatas"
                       action="" :http-request="readMarkdownFile" :before-upload="handleUploadBefore" multiple>
              <i class="el-icon-upload"></i> 文档导入
            </el-upload>

            <mavon-editor placeholder="输入文章内容..." style="height: 590px" ref=md v-model="article.contentMd"
                          @imgDel="imgDel" @change="" @imgAdd="imgAdd">
              <!-- 左工具栏后加入自定义按钮  -->
              <template slot="left-toolbar-after">

                <el-dropdown>
                                    <span class="el-dropdown-link">
                                        <i class="op-icon fa el-icon-video-camera" title="上传视频"></i>
                                    </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <el-upload style="display: inline-block;" :show-file-list="false" ref="upload"
                                 name="filedatas" action="" :http-request="uploadVideo"
                                 :before-upload="handleUploadBefore" multiple>
                        <span>上传视频</span>
                      </el-upload>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <div @click="dialogVisible = true">添加视频地址</div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </mavon-editor>
          </el-form-item>
        </div>
        <div class="article-right">
          <div class="top">
            <el-form-item label="文章标签" prop="tagList">
              <el-select v-model="article.tagList" :multiple-limit="3" multiple placeholder="请选择标签">
                <el-option v-for="item in tagList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="文章分类" prop="categoryId">
              <el-select v-model="article.categoryId" placeholder="请选择分类">
                <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创作类型" prop="isOriginal">
              <el-radio v-model="article.isOriginal" :label="1">原创</el-radio>
              <el-radio v-model="article.isOriginal" :label="0">转载</el-radio>
            </el-form-item>
            <el-form-item v-if="article.isOriginal === 0" label="文章地址" prop="originalUrl">
              <el-input v-model="article.originalUrl"></el-input>
            </el-form-item>
            <el-form-item label="关键词">
              <el-input v-model="article.keywords"></el-input>
            </el-form-item>
          </div>

          <div class="bottom">
            <div class="btn-tips">Are you ready</div>
            <button v-if="$store.state.userInfo" type="button" class="btnDraft hand-style" @click="submit(3)">
              <i class="el-icon-orange"></i> 保存草稿
            </button>
            <button v-if="$store.state.userInfo" type="button" class="btnSubmit hand-style" @click="submit(2)">
              <i class="el-icon-circle-check"></i> 提交审核
            </button>
            <span v-else class="noBtn">
                            暂无发布权限,请先<span @click="$store.state.loginFlag = true" class="hand-style">登录</span>
                        </span>
          </div>
        </div>
      </el-form>
    </div>
    <el-dialog center title="添加视频" :visible.sync="dialogVisible" width="30%">
      <el-input v-model="videoInput" placeholder="视频地址"></el-input>
      <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addVideo">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  upload,
  featchCategory,
  insertArticle,
  updateArticle,
  getMyArticleInfo,
  fetchTagList,
  readMarkdownFile
} from '@/api'

export default {
  data() {
    return {
      uploadPictureHost: process.env.VUE_APP_BASE_API + "/file/upload",
      article: {
        avatar: "",
        title: "",
        isOriginal:1
      },
      categoryList: [],
      dialogVisible: false,
      loading: [],
      img: process.env.VUE_APP_IMG_API,
      articleId: this.$route.query.id,
      tagList: [],
      videoInput: "",
      rules: {
        title: [
          {required: true, message: '请输入文章名称', trigger: 'blur'},
        ],
        avatar: [
          {required: true, message: '请上传文章封面', trigger: 'change'},
        ],
        summary: [
          {required: true, message: '请输入文章简介', trigger: 'blur'},
        ],
        tagList: [
          {required: true, message: '请选择文章标签', trigger: 'blur'},
        ],
        categoryId: [
          {required: true, message: '请选择文章分类', trigger: 'blur'},
        ],
        isOriginal: [
          {required: true, message: '请选择创作类型', trigger: 'blur'},
        ],
        originalUrl: [
          {required: true, message: '请输入转载地址', trigger: 'blur'},
        ],
        contentMd: [
          {required: true, message: '请输入文章内容', trigger: 'blur'},
        ],
      }
    };
  },
  beforeRouteLeave(to, from, next) {
    // 删除md编辑器的高亮样式 否则会跟文章详情代码块样式有冲突
    let css = document.getElementsByTagName('link');
    for (let i = 0; i < css.length; i++) {
      if (css[i].href.includes("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/github.min.css")) {
        css[i].parentNode.removeChild(css[i]);
      }
    }
    next()
  },
  created() {
    if (this.articleId) {
      getMyArticleInfo(this.articleId).then(res => {
        this.article = res.data
      })
    }
    featchCategory().then(res => {
      this.categoryList = res.data
    })
    fetchTagList().then(res => {
      this.tagList = res.data
    })
  },
  methods: {
    imgAdd: function (pos, $file) {
      var formdata = new FormData();
      formdata.append('multipartFile', $file);
      upload(formdata).then(res => {
        this.$refs.md.$img2Url(pos, res.data);
      }).catch(err => {
        console.log(err)
      })
    },
    imgDel: function (filename) {
      delBatchFile(filename[0].split(this.img)[1])
    },
    submit(type) {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (!this.article.contentMd) {

            this.$toast.error('请编写文章内容！');
            return;
          }
          this.article.isPublish = type
          this.article.content = this.$refs.md.d_render
          if (this.article.id) {
            updateArticle(this.article).then(res => {

              this.$toast.success('修改成功，请耐心等待审核');
              this.$router.push({path: "/user"})
            })
          } else {
            insertArticle(this.article).then(res => {

              this.$toast.success('提交成功，请耐心等待审核');
              this.$router.push({path: "/user"})
            })
          }

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleUploadImage(event, insertImage, files) {
      const file = files[0]
      // FormData 对象
      var formData = new FormData()
      // 文件对象
      formData.append('multipartFile', file)
      upload(formData).then(res => {
        insertImage({
          url: res.data,
          desc: file.name,
          width: '100%',
          height: '300px',
        });
      })

    },
    handleUploadBefore() {
      this.$bus.$emit('show');
    },
    readMarkdownFile(param) {
      var fileExtension = param.file.name.split('.').pop().toLowerCase();
      if (fileExtension !== "md") {
        this.$bus.$emit('close')
        this.$toast.error("只能上传md后缀的文件")
        return false;
      }
      this.files = param.file
      // FormData 对象
      var formData = new FormData()
      // 文件对象
      formData.append('file', this.files)
      readMarkdownFile(formData).then(res => {
        this.article.contentMd = res.data.content
        this.article.title = res.data.fileName
        this.$bus.$emit('close')
      }).catch(err => {
        this.$bus.$emit('close')
      })
    },
    addVideo() {
      // 这里获取到的是mavon编辑器实例，上面挂载着很多方法
      const $vm = this.$refs.md
      // 将文件名与文件路径插入当前光标位置，这是mavon-editor 内置的方法
      $vm.insertText($vm.getTextareaDom(),
          {
            prefix: `<video height=100% width=100% controls autoplay src="${this.videoInput}"></video>`,
            subfix: '',
            str: ''
          })

      this.dialogVisible = false
      this.videoInput = ''
    },
    uploadVideo(param) {
      this.files = param.file
      // FormData 对象
      var formData = new FormData()
      // 文件对象
      formData.append('multipartFile', this.files)
      upload(formData).then(res => {
        const $vm = this.$refs.md
        // 将文件名与文件路径插入当前光标位置，这是mavon-editor 内置的方法
        $vm.insertText($vm.getTextareaDom(),
            {
              prefix: `<video height=100% width=100% controls autoplay src="${res.data}"></video>`,
              subfix: '',
              str: ''
            })
        this.$bus.$emit('close')
      }).catch(err => {
        this.$bus.$emit('close')
      })
    },
    uploadSectionFile: function (param) {
      this.files = param.file
      // FormData 对象
      var formData = new FormData()
      // 文件对象
      formData.append('multipartFile', this.files)
      upload(formData).then(res => {
        this.article.avatar = res.data
        this.$bus.$emit('close')
      }).catch(err => {
        this.$bus.$emit('close')
      })
    },
  }
};
</script>
<style lang="scss" scoped>
.article-add {
  display: flex;
  justify-content: center;
  height: 100vh;

  @media screen and (max-width: 1118px) {
    padding: 0 5px;

    .containner {
      width: 100%;

    }
  }

  @media screen and (min-width: 1119px) {
    .containner {
      width: 80%;
    }
  }

  .containner {
    margin-top: 80px;
    padding: 10px;
    color: var(--text-color);

    /deep/ .article-left input {
      border-top: none !important;
      border-left: none !important;
      border-right: none !important;

      &:hover {
        border-color: var(--theme-color) !important;
      }
    }

    .title {
      margin-bottom: 15px;
      position: relative;
      padding-left: 10px;

      &::before {
        content: ' ';
        width: 5px;
        height: 100%;
        background: linear-gradient(to right, #ff00ff, #c2553a);
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }

    .article-left,
    .article-right .top,
    .bottom {
      border-radius: 5px;
      padding: 10px;
    }

    .article-left {
      background-color: var(--background-color);
      margin-right: 20px;
      width: 100%;
      max-width: 80%;

      .el-textarea {
        width: 92%;
      }

      /deep/ .contentInput textarea {
        resize: none;
        background-color: var(--background-color);
      }
    }

    .article-right {
      width: 35%;
      height: 100%;
      display: flex;
      flex-direction: column;

      .top,
      .bottom {
        background-color: var(--background-color);
      }

      .bottom {
        margin-top: 20px;
        text-align: center;

        .btn-tips {
          color: #b5b5b5;
          font-size: 0.75rem;
          margin-bottom: 1rem;

          &::before {
            content: "";
            display: inline-block;
            background-color: #d8d8d8;
            width: 60px;
            height: 1px;
            margin: 0 12px;
            vertical-align: middle;
          }

          &::after {
            content: "";
            display: inline-block;
            background-color: #d8d8d8;
            width: 60px;
            height: 1px;
            margin: 0 12px;
            vertical-align: middle;
          }
        }

        .btnDraft,
        .btnSubmit {
          padding: 10px;
          width: 50%;
          border: none;
          margin: 0 auto;
          color: #fff;
          font-weight: 700;
        }

        .btnDraft {
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
          background: linear-gradient(135deg, #60e464 10%, #5cb85b 100%);
        }

        .btnSubmit {
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
          background: linear-gradient(135deg, #59c3fb 10%, #268df7 100%);
        }

        .noBtn {
          color: var(--text-color);

          span {
            color: var(--theme-color);
          }
        }
      }

    }

  }
}

.articeAvatar {
  /deep/ .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    max-width: 200px;
    height: 100px;
    text-align: center;
  }

  /deep/ .el-upload-dragger {
    width: 100%;
    height: 100%;
  }

  /deep/ .el-upload {
    width: 100%;
    height: 100%;
  }

  /deep/ .avatar-uploader:hover {
    border-color: #409EFF;
  }

  /deep/ .el-icon-plus {
    font-size: 28px;
    color: #8c939d;
    line-height: 100px;
  }

  /deep/ .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
